import React from "react"
import "./Todomain.css"
export default class Todoheader extends React.Component {
    render() {
        let { todos } = this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(item => {
                        return <li key={item.id}>
                            <label>
                                <input type="checkbox" checked={item.done} onChange={this.change(item.id)} />
                                <span>{item.title}</span>
                            </label>
                            <button className="btn btn-danger" style={{ display: item.done ? "block" : "none" }} onClick={this.remove(item.id)} tid={item.id}>删除</button>
                        </li>
                    })
                }
                {todos.length === 0 && <li className="empty">暂无数据</li>}

            </ul>
        )
    }
    change = (id) => {
        return (e) => {
            this.props.checkTodo(id, e.target.checked);
        }
    }
    remove = (id) => {
        return (e) => {
            this.props.removeTodo(id)
        }
    }
}